body{
    position: relative;
    color: #0e2026;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    background-origin: border-box;
    box-sizing: border-box;

    &.abs-header{
        padding-top: 90px;
    }
}

body, button, input, select, textarea {
    //font: 14px/1.5 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif;
    //font: 14px/1.5 Arial, 'Microsoft yahei', 'Hiragino Sans GB', '冬青黑体简体中文 w3', 'Microsoft Yahei', 'Hiragino Sans GB', '冬青黑体简体中文 w3', STXihei, '华文细黑', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif;
    //font: 14px/1.5 "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    font: 14px/1.5 "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

input, textarea, button{
  &:focus{
    outline: none !important;
  }
}

textarea{
    resize: none;
}

blockquote {
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid #eeeeee;
}

::selection{
    //background: #fe917b;
    background: #3ca5f6;
    color: #fff;
}

img{
    max-width: 100%;

    &.avatar{
        border-radius: 50%;
    }
}


//animation
.hover-scale{

    img{
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        -ms-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        transition: all .5s ease-out;
    }

    &:hover img{
        -webkit-transform: matrix(1.04, 0, 0, 1.04, 0, 0);
        -moz-transform: matrix(1.04, 0, 0, 1.04, 0, 0);
        -ms-transform: matrix(1.04, 0, 0, 1.04, 0, 0);
        -o-transform: matrix(1.04, 0, 0, 1.04, 0, 0);
        transform: matrix(1.04, 0, 0, 1.04, 0, 0);
    }
}

.transition {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-snap {
  to {
    opacity: 1;
  }
}

@keyframes fade-in-snap {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-scale {
  from {
    opacity: 0;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes keyboard-focus-style-fade-out {
  from {
    box-shadow: inset 0 0 30px 1px rgb(180, 186, 187);
  }

  to {
    box-shadow: none;
  }
}

@keyframes keyboard-focus-style-fade-out {
  from {
    box-shadow: inset 0 0 30px 1px rgb(180, 186, 187);
  }

  to {
    box-shadow: none;
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.fade-in{
    -webkit-animation: fade-in .2s;
    animation: fade-in .2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.fade-in-scale{
    -webkit-animation: fade-in-scale .2s;
    animation: fade-in-scale .2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.fade-out{
    -webkit-animation: fade-out .5s;
    animation: fade-out .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

//sprite icons
.icon{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../images/icon/icons.png");
    background-repeat: no-repeat;
    vertical-align: text-bottom;
}

.icon-weibo{
    background-position: 10px -104px;

    &:hover{
        background-position: 9px -144px;
    }
}

.icon-weixin{
    background-position: -49px -105px;

    &:hover{
        background-position: -50px -145px;
    }
}

.icon-rss{
    background-position: -109px -185px;

    &:hover{
        background-position: -109px -226px;
    }
}


//单选与复选框
.for-checkbox input, .for-radio input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -9999px;
}

.for-checkbox p, .for-radio p {
    color: #b3b2a8;
    //white-space: nowrap;
    font-weight: 400;
}

.for-checkbox label p, .for-radio label p {
    color: #000;
    font-weight: 400;
}

.for-checkbox .input-toggle-component, .for-radio .input-toggle-component {
    position: relative;
    top: 1px;
    display: inline-block;
    float: left;
    margin-right: 7px;
    width: 18px;
    height: 18px;
    border: 1px solid #dfe1e3;
    background: #f7f7f7;
}

.for-checkbox .input-toggle-component {
    border-radius: 4px;
    transition: background .15s ease-in-out,border-color .15s ease-in-out;
}

.for-checkbox input:checked+.input-toggle-component {
    border-color: #859f41;
    background: #9fbb58;
}

.for-checkbox .input-toggle-component:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    width: 10px;
    height: 6px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    opacity: 0;
    transition: opacity .15s ease-in-out;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.for-checkbox input:checked+.input-toggle-component:before {
    opacity: 1;
}